1
00:00:00,000 --> 00:00:04,050
[Maximilian Schwarzmuller] Sekarang untuk modul kursus ini,

2
00:00:04,050 --> 00:00:06,810
Saya akan menggunakan Firebase lagi.

3
00:00:06,810 --> 00:00:10,030
Saya menggunakan Firebase sebagai backend tiruan sebelumnya,

4
00:00:10,030 --> 00:00:13,920
untuk mengirim permintaan Http dan menyimpan data,

5
00:00:13,920 --> 00:00:17,160
dan sekarang saya akan menggunakannya untuk otentikasi.

6
00:00:17,160 --> 00:00:20,540
Karena jika Anda memiliki proyek Firebase

7
00:00:20,540 --> 00:00:25,180
maka Anda juga dapat menggunakan REST API Firebase Authentication,

8
00:00:25,180 --> 00:00:30,180
yang dapat Anda temukan jika Anda menggunakan Google untuk Firebase Auth REST API.

9
00:00:30,470 --> 00:00:34,903
Di sana Anda akan menemukan dokumen Firebase Auth REST API ini.

10
00:00:35,760 --> 00:00:38,900
Dan di sini Anda dapat mempelajari titik akhir API mana

11
00:00:38,900 --> 00:00:43,900
Anda perlu mengirim permintaan untuk membuat pengguna, memasukkan pengguna

12
00:00:44,490 --> 00:00:47,820
atau dapatkan akses ke beberapa sumber daya yang dilindungi.

13
00:00:47,820 --> 00:00:51,540
Dan saya hanya menggunakan Firebase sebagai backend tiruan di sini

14
00:00:51,540 --> 00:00:54,230
karena saya tidak ingin menulis kode backend saya sendiri

15
00:00:54,230 --> 00:00:57,690
karena itu tidak ada hubungannya dengan React.

16
00:00:57,690 --> 00:00:59,730
Jika Anda ingin melihatnya juga,

17
00:00:59,730 --> 00:01:02,490
baik React maupun backend khusus

18
00:01:02,490 --> 00:01:05,239
dan menulis semua kode backend khusus itu,

19
00:01:05,239 --> 00:01:07,780
Anda dapat melihat kursus Mern saya,

20
00:01:07,780 --> 00:01:11,510
tempat kami menggabungkan React dan MongoDB serta Node dan Express

21
00:01:11,510 --> 00:01:13,850
menjadi satu proyek besar.

22
00:01:13,850 --> 00:01:18,130
Kemudian Anda melihat kedua sisi dibangun dari awal oleh kami.

23
00:01:18,130 --> 00:01:20,140
Ini adalah kursus React

24
00:01:20,140 --> 00:01:22,883
dan oleh karena itu kami akan menggunakan backend tiruan ini.

25
00:01:24,080 --> 00:01:27,120
Sekarang di sini untuk Firebase Auth REST API ini,

26
00:01:27,120 --> 00:01:31,030
di sebelah kanan, Anda akan menemukan titik akhir untuk mendaftar,

27
00:01:31,030 --> 00:01:34,280
jadi untuk membuat pengguna dengan email dan kata sandi,

28
00:01:34,280 --> 00:01:37,930
dan Anda melihat URL tujuan pengiriman permintaan

29
00:01:37,930 --> 00:01:40,720
dan Anda melihat jenis data apa yang perlu ditambahkan

30
00:01:40,720 --> 00:01:42,340
untuk permintaan itu.

31
00:01:42,340 --> 00:01:46,200
Dan kita akan melakukannya bersama-sama dalam modul ini.

32
00:01:46,200 --> 00:01:50,193
Anda menemukan titik akhir untuk masuk, jadi untuk masuk,

33
00:01:51,220 --> 00:01:53,880
dan Anda juga akan menemukan titik akhir

34
00:01:53,880 --> 00:01:56,820
untuk mengubah kata sandi.

35
00:01:56,820 --> 00:01:59,860
Dan kita memerlukannya untuk halaman profil ini

36
00:01:59,860 --> 00:02:03,720
di mana pengguna harus dapat mengubah kata sandi mereka.

37
00:02:03,720 --> 00:02:07,460
Dan ini sebenarnya akan menjadi sumber daya yang dilindungi,

38
00:02:07,460 --> 00:02:09,729
yang kami akses di sini, karena, tentu saja,

39
00:02:09,729 --> 00:02:12,480
Anda seharusnya hanya dapat mengubah kata sandi Anda

40
00:02:12,480 --> 00:02:14,233
jika Anda sudah masuk.

41
00:02:15,120 --> 00:02:19,810
Itu sebabnya titik akhir API ini juga menginginkan token ID

42
00:02:19,810 --> 00:02:22,400
sebagai bagian dari muatan permintaan.

43
00:02:22,400 --> 00:02:24,900
Jadi, sebagai bagian dari data permintaan

44
00:02:24,900 --> 00:02:27,430
dan itu akan menjadi tanda yang tepat

45
00:02:27,430 --> 00:02:30,023
seperti yang saya jelaskan beberapa menit yang lalu.

46
00:02:31,160 --> 00:02:35,770
Jadi itulah API yang akan berfungsi, sebagai backend tiruan,

47
00:02:35,770 --> 00:02:38,660
dan itulah proyek tiruan yang akan kita gunakan

48
00:02:38,660 --> 00:02:41,250
untuk bagian ini di sini.

49
00:02:41,250 --> 00:02:44,700
Dan proyek ini, cuplikan proyek ini sekarang bisa

50
00:02:44,700 --> 00:02:47,523
juga dapat ditemukan terlampir pada kuliah ini.

51
00:02:48,380 --> 00:02:51,660
Di sana Anda akan menemukan kode awal yang akan kami gunakan

52
00:02:51,660 --> 00:02:55,690
dan pada akhirnya ini adalah proyek React yang sangat mudah.

53
00:02:55,690 --> 00:02:59,460
Kami mendapat beberapa halaman di mana semua Komponen Halaman tersebut

54
00:02:59,460 --> 00:03:02,000
sangat ramping, dan pada akhirnya,

55
00:03:02,000 --> 00:03:04,510
cukup sertakan beberapa Komponen lainnya.

56
00:03:04,510 --> 00:03:09,030
Dan Komponen tersebut juga cukup mudah.

57
00:03:09,030 --> 00:03:11,890
Di sana, saya belum menambahkan banyak logika.

58
00:03:11,890 --> 00:03:14,110
Satu-satunya logika yang saya tambahkan adalah

59
00:03:14,110 --> 00:03:16,340
bahwa kita memiliki navigasi ini di sini

60
00:03:16,340 --> 00:03:18,460
dan itu di halaman login,

61
00:03:18,460 --> 00:03:21,440
kita dapat beralih antara mendaftar dan masuk

62
00:03:21,440 --> 00:03:24,270
dengan bantuan useState di sini.

63
00:03:24,270 --> 00:03:27,200
Itu kode ini di Komponen AuthForm,

64
00:03:27,200 --> 00:03:28,600
tapi itu saja.

65
00:03:28,600 --> 00:03:30,390
Kami tidak menangani pengiriman formulir,

66
00:03:30,390 --> 00:03:33,430
kami belum mengirimkan permintaan Http apa pun

67
00:03:33,430 --> 00:03:35,530
atau semacamnya.

68
00:03:35,530 --> 00:03:38,730
Jadi Anda cukup mengunduh proyek awal ini,

69
00:03:38,730 --> 00:03:42,200
lihat sekilas kode yang saya berikan kepada Anda

70
00:03:42,200 --> 00:03:45,010
untuk membiasakan diri dengannya.

71
00:03:45,010 --> 00:03:47,070
Namun kemudian pada kuliah berikutnya,

72
00:03:47,070 --> 00:03:50,810
kita akan mulai mengerjakan kode ini bersama-sama

73
00:03:50,810 --> 00:03:54,620
untuk menambah, mendaftar dan masuk dan keluar

74
00:03:54,620 --> 00:03:58,010
dan untuk mengirim permintaan ke sumber daya yang dilindungi

75
00:03:58,010 --> 00:04:02,650
dan juga untuk mengunci akses ke halaman tertentu

76
00:04:02,650 --> 00:04:04,740
dari aplikasi ini.

77
00:04:04,740 --> 00:04:06,150
Jadi, misalnya,

78
00:04:06,150 --> 00:04:09,100
Anda tidak dapat mengunjungi halaman profil ini,

79
00:04:09,100 --> 00:04:12,030
jika Anda belum login.

80
00:04:12,030 --> 00:04:14,210
Kita akan melihat semua itu,

81
00:04:14,210 --> 00:04:16,339
sepanjang bagian kursus ini.

82
00:04:16,339 --> 00:04:17,880
Untuk ini sebagai langkah terakhir

83
00:04:17,880 --> 00:04:21,560
pastikan saja Anda memiliki akun Firebase

84
00:04:21,560 --> 00:04:25,180
dan pastikan Anda memiliki proyek yang dibuat di sana.

85
00:04:25,180 --> 00:04:27,990
Anda tidak perlu menggunakan Realtime Database.

86
00:04:27,990 --> 00:04:29,910
Kita tidak perlu menggunakan statistik.

87
00:04:29,910 --> 00:04:33,020
Anda dapat menghapus data apa pun yang Anda miliki di sana.

88
00:04:33,020 --> 00:04:37,390
Sebagai gantinya, kami akan bekerja dengan bagian Otentikasi di sini

89
00:04:37,390 --> 00:04:40,220
dan saya akan menjelaskan bagaimana kami menggunakannya

90
00:04:40,220 --> 00:04:41,410
pada perkuliahan berikutnya.

91
00:04:41,410 --> 00:04:43,810
Dan kami kemudian akan menulis kode untuk itu.